<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>列表排序</title>
    <!--引入vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
   </head>

<body>
    <!--准备好一个容器-->
    <div id="root">
<!-- 遍历数组 -->
<h2>人员列表</h2>    
<input type="text" placeholder="请输入名字..." v-model="keyWord">
<!-- 点击按钮时修改sortType的值  根据sortType的值对过滤后的数组进行操作-->
<button @click="sortType = 2">年龄升序</button>
<button @click="sortType = 1">年龄降序</button>
<button @click="sortType = 0">原顺序</button>
  <ul>
   <li v-for="(p,index) in filPersons"  :key="p.id">
   {{p.name}}-{{p.age}}-{{p.sex}}
   <input type="text">
 </li>   
</ul>    
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false  //阻止vue在启动时生成使用生产版本提示。
  // 用computed实现
    new Vue({
        el:'#root',
        data:{
            keyWord:'',
            sortType:0,  // 0--原数组  1--降序  2--升序
            persons:[ 
                {id:'001',name:'马冬梅',age:18,sex:'女'},
                {id:'002',name:'周冬雨',age:23,sex:'女'},
                {id:'003',name:'周杰伦',age:20,sex:'男'},
                {id:'004',name:'温兆伦',age:26,sex:'男'}
            ]
              
        },
        computed:{
          filPersons(){
              const arr = this.persons.filter((p)=>{
              // 函数体
              return p.name.indexOf(this.keyWord) !== -1  // 该return是filter规定的返回的过滤条件，这么做的好处就是，我们不需要对keyWord进行监视，只要keyWord发生改变filPersons()这个函数就会被重新调用
            })
            // 判断是否需要排序 根据sortType
            if(this.sortType){
              arr.sort((p1,p2)=>{ // p1和p2分别代表persons数组里的对象
                // 函数体
                return this.sortType === 1 ?  p2.age-p1.age : p1.age-p2.age // 排序的条件
              })
            }
            return arr // 将排序好的数组arr返回给filPersons 进行遍历  进行页面展示
          }
        }      
    })
    // a-b 是升序  b-a是降序
   /*  let arr = [1,3,2,6,4,5]
    arr.sort((a,b)=>{ 
        return b-a
    })
    console.log(arr); */
</script>
</html>

